• 昨天我們介紹的debounceTime，當事件觸發後，如果這一段時間都沒有任何事件進來，我就會選擇這筆資料。
• throttleTime的概念則是，當事件觸發後，這筆資料會馬上被選擇，而這段期間任何輸入的事件資料，都會被忽略。

throttleTime

圖片來源-RxJS Marbles-throttleTime

• 從彈珠圖來看，就可了解，當一個事件觸發後，事件資料馬上被往後傳遞，而在duration time = 25ms期間內的所有資料，都被丟棄。

stackblitz

import { fromEvent, throttleTime, tap, map } from 'rxjs';

const keyup$ = fromEvent(document, 'keyup');

keyup$
  .pipe(
    map((event: KeyboardEvent) => event.code), // 取keycode
    tap((code) => console.log(code)), // 顯示使用者輸入的keycode
    throttleTime(2000) // throttleTime
  )
  .subscribe((code) => console.log('===>throttle:', code));

解析

• 測試中，我嘗試著輸入不同的key值，你可以發現，throttleTime會將第一個事件的key值送出，過程中任何被觸發的值都會被丟棄。
• 這代表說，throttleTime相當適合拿來設計:

1. 拖曳時防止抖動:因為抖動的座標，代表拖曳時偏離軌道，可認定為雜訊，故可忽略。
2. 優化scroll事件: 每捲動一格，scroll事件就會被觸發一次，其實可以不用這麼頻繁的觸發，用throttleTime就能優化囉!

透過scroll的事件來看debounceTime及throttleTime範例的差異

stackblitz

scroll + normal

先來看原始的設計，每次捲動一格，scroll事件就會被觸發一次!相當耗費效能。

scroll + throttle

利用throttleTime來降低取樣頻率，讓效能提升!

scroll+debounce

當事件觸發後，等待一段時間沒有資料近來，debounceTime才會將這筆資料往後傳遞。
因此，當使用者停下scroll動作，等待一段時間才會送出百分比。

✍Recap:

• throttleTime及debounceTime都相當適合拿來 減少高頻取樣 的設計。

1. throttleTime: 當事件觸發後，這筆資料會馬上被選擇，而這段期間任何輸入的事件資料，都會被忽略。

適合與動畫、拖曳或scroll結合。

2. debounceTime:當事件觸發後，如果這一段時間都沒有任何事件進來，我就會選擇這筆資料。

適合拿來判斷使用者是否高頻率的輸入(keyup)或點擊(click)。

• 呼~今天花了許多時間完成這一篇，原因是因為throttleTime有許多眉角需要釐清，相信是值得的~ 繼續fighting!!
  

參考資料

• 30 天精通 RxJS (14)： Observable Operator - throttle, debounce
• scroll範例- throttleTime & debounceTime(非RxJS)